<template>
  <div>
    <a-modal
      centered
      :title="title"
      :width="1200"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="账号编码">
                <a-input placeholder="请输入登录账号" v-model="queryParam.id"></a-input>
              </a-form-item>
            </a-col>
            <!--            <a-col :span="6">-->
            <!--              <a-form-item label="用户昵称">-->
            <!--                <a-input placeholder="请输入用户昵称" v-model="queryParam.name"></a-input>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <a-col :span="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button
                  type="primary"
                  @click="() => {$refs.table.refresh(true)}"
                  icon="search">查询</a-button>
                <a-button
                  type="gray"
                  @click="() => {this.$objToReset(queryParam),$refs.table.refresh(true)}"
                  icon="reload"
                  style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <div style="margin-bottom: 20px;margin-top: 5px">查询结果</div>
            <s-table
              style="margin-top: 20px"
              ref="table"
              rowKey="id"
              :columns="columns1"
              :data="loadData"
              :alert="options.alert"
              showPagination="auto"
              :loading="loading"
              :clearChoose="false"
              :scroll="{ y: 240 }"
              :rowSelection="options.rowSelection"
              @onSelectAll="handleTableChange"
            >
              <template slot="userData" slot-scope="text, record">
                <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="environment"/>
                {{ record.nickname }}
              </template>
            </s-table>
          </a-col>
          <a-col :md="12" :sm="24">
            <div style="margin-bottom: 20px;margin-top: 5px">已选用户</div>
            <a-table
              ref="table2"
              rowKey="id"
              :columns="columns2"
              :dataSource="selectionRows"
              :loading="loading"
              :scroll="{ y: 240 }"
            >
              <template slot="userData" slot-scope="text, record">
                <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="environment"/>
                {{ record.nickname }}
              </template>
              <template slot="action" slot-scope="text, record">
                <a @click="handleDelete(record.id)">
                  <a>删除</a>
                </a>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </div>
      <!-- table区域-end -->
    </a-modal>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { postAction } from '@/api/manage'
import DepartWindowShow from '@/components/WxDepartChoose/DepartWindowShow'

export default {
  name: 'WxSelectUserComponent',
  components: {
    Ellipsis,
    STable,
    DepartWindowShow
  },
  props: {
    // 传入已经选择的id
    selectIds: {
      type: Array,
      default: () => []
    },
    // 传入已经选择的id
    multipleFlag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      title: '请先输入编号查询！！',
      visible: false,
      placement: 'right',
      // 查询条件
      queryParam: {
        departCode: undefined
      },
      // 表头
      columns1: [
        {
          title: '账号编码',
          width: 100,
          dataIndex: 'id'
        },
        {
          title: '用户信息',
          width: 100,
          scopedSlots: { customRender: 'userData' }
        }
      ],
      columns2: [
        {
          title: '账号编码',
          width: 100,
          dataIndex: 'id'
        },
        {
          title: '用户信息',
          width: 100,
          scopedSlots: { customRender: 'userData' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 50,
          scopedSlots: { customRender: 'action' }
        }
      ],
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      loadData: parameter => {
        return postAction(this.url.getlist, Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.result
          })
      },
      loading: false,
      selectedRowKeys: [],
      selectionRows: [],
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          onSelect: this.handleTableSelect,
          onSelectAll: this.handleTableSelectAll,
          type: this.multipleFlag ? 'checkbox' : 'radio'
        }
      },
      url: {
        getlist: '/system/user/chooseList',
        getall: '/system/user/allList'
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    searchQuery () {
      this.$refs.table.refresh(true)
    },
    // 关闭
    handleCancel () {
      this.clearSelect()
      this.visible = false
    },
    // 清空选择
    clearSelect () {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
    },
    getAvatarView: function (avatar) {
      return this.$getFileAccessHttpUrl(avatar)
    },
    handleOk () {
      console.log('dataSelectedRowKeys:' + this.selectedRowKeys)
      console.log('dataSelectionRows:' + this.selectionRows)
      this.$emit('ok', [...this.selectedRowKeys], [...this.selectionRows])
      this.clearSelect()
      this.visible = false
    },
    show () {
      this.visible = true
      this.$nextTick(() => {
        if (this.selectIds !== undefined) {
          this.selectedRowKeys = this.selectIds
          console.log(this.selectIds.join(','))
          postAction(this.url.getall, { ids: this.selectIds.join(',') }).then(res => {
            this.selectionRows = res.result.data
            this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
          }).finally(() => {
          })
        }
      })
    },
    departOk (val) {
      this.queryParam.departCode = val
    },
    handleTableSelectAll (selected, selectedRows, changeRows) {
      if (selected) {
        const rowKeys = []
        selectedRows.map(x => {
          rowKeys.push(x.id)
        })
        this.selectedRowKeys = this.$uniqueTableId(this.selectedRowKeys, rowKeys)
        this.selectionRows = this.$uniqueTable(this.selectionRows, selectedRows, this.selectedRowKeys, 'id')
        this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
      } else {
        changeRows.map(x => {
          this.handleDelete(x.id)
        })
      }
    },
    // 用户手动选择/取消选择某列的回调
    handleTableSelect (record, selected, selectedRows, nativeEvent) {
      if (selected) {
        if (this.options.rowSelection.type === 'radio') {
          this.selectedRowKeys = [record.id]
          this.selectionRows = [record]
          this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
        } else {
          this.selectedRowKeys = this.$uniqueTableId(this.selectedRowKeys, [record.id])
          this.selectionRows = this.$uniqueTable(this.selectionRows, [record], this.selectedRowKeys, 'id')
          this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
        }
      } else {
        this.handleDelete(record.id)
      }
    },
    handleTableChange (pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      console.log(sorter)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
      }
    },
    // 删除
    handleDelete (record) {
      for (var i = 0; i < this.selectionRows.length; i++) {
        if (this.selectedRowKeys[i] === record) {
          this.selectionRows.splice(i, 1)
          this.selectedRowKeys.splice(i, 1)
          break
        }
      }
      this.$refs.table.updateSelect(this.selectedRowKeys, this.selectionRows)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
